import React ,{Suspense} from 'react'

import {
    BrowserRouter, //histroy路由
    HashRouter,  //哈希路由
    Routes, // 精确匹配每一个组件
    Route,//路由试图
    Navigate//重定向
} from "react-router-dom"

import routes from "./RouterConfig"

function index() {
    //封装一个路由函数
    const renderRouter = (arr) => {
        console.log(arr);
        return arr.map((item,index)=>{
            // 如果我的item.path存在 我渲染我的路由试图 也就是我的<item.element/> 如果不存在 渲染重定向 <Navigate to={item.to}/>
            return item.path? <Route key={index} path={item.path} element={<item.element/>}>
                {
                    item.children&&renderRouter(item.children)
                }
            </Route>
            :<Route key={index} path={item.from} element={<Navigate to={item.to}/>}></Route>
        })
    }
    return (
        <Suspense fallback={<div>路由加载中</div>}>
            <BrowserRouter>
                <Routes>
                    {
                        renderRouter(routes)
                    }
                </Routes>
            </BrowserRouter>
        </Suspense>
    )
}

export default index
